<template>
  <div class="bottom-card">
    <card-empty-item
      name="新增课程"
      @click.native="addCourse()"
    ></card-empty-item>
    <div
      class="f-card-item card-wrapper"
      v-for="(item, index) in data"
      :key="index"
    >
      <div class="card-item-top">
        <div>
          <el-avatar class="img">course</el-avatar>
        </div>
        <div class="item-top-text">{{ item.courseName }}</div>
        <div class="f-flex"></div>
        <div class="f-btn f-btn-blue" @click="btnPrepare">去备课</div>
      </div>
      <div class="card-item-center">
        <!-- 悬浮提示信息 -->
        <el-popover
          popper-class="atooltip"
          effect="dark"
          placement="bottom"
          :visible-arrow="false"
          trigger="hover"
          :content="item.courseDesc"
        >
          <div class="item-center-text" slot="reference">
            <span style="color: black">课程描述: </span>{{ item.courseDesc }}
          </div>
        </el-popover>
      </div>
      <div class="card-item-bottom">
        <div class="item-bottom-btn" @click="btnEdit(item)">编辑</div>
        <div class="item-btn-line"></div>
        <div class="item-bottom-btn" @click="btnDel(item)">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import CardEmptyItem from "./CardEmptyItem";

export default {
  name: "CourseCardList",

  components: {
    CardEmptyItem,
  },

  props: {
    // 父组件传递的列表数据
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {};
  },

  methods: {
    // 新增课程
    addCourse() {
      this.$emit("eventAddCourse");
    },

    // 去备课
    btnPrepare() {
      this.$router.push({ path: "/manage-index/courseware-wrapper" });
    },

    // 编辑课程
    btnEdit(item) {
      // TODO: 需要将当前需要编辑的数据传递给父组件
      this.$emit("eventEditCourse", item);
    },

    // 删除课程
    btnDel(item) {
      this.$emit("eventDelCourse", item);
    },
  },
};
</script>

<style lang="less" scoped>
.card-wrapper {
  flex-direction: column;
  // box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 12%), 0 0 6px rgba(0, 0, 0, 4%);
  box-shadow: 0 5px 6px 2px rgba(18, 64, 94, 0.12),
    0 0 6px rgba(109, 135, 139, 0.1);
  &:hover {
    // transform: translateY(-12px);
    box-shadow: 0 2px 10px 8px rgba(18, 64, 94, 0.12),
      0 4px 8px 4px rgba(109, 135, 139, 0.1);
  }
  // 部分样式在f-profile.less文件中可查找到
}
</style>
<style lang="less">
// 文本提示样式设置
.atooltip {
  width: 20%;
  background: rgba(42, 57, 86, 0.9) !important;
  color: #fff;
  font-size: @t6 !important;
  line-height: 22px !important;
}
</style>